<template>
  <a-page id="topics">
    <div class="q-mt-lg q-mx-sm">
      <q-parallax
                  @click.native="$router.push('/china/')"
                  src="/statics/bar/china.jpg"
                  :height="imgHeight"
                  class="topic q-mb-xl shadow-15">
        <div slot="loading title">正在载入...</div>
        <div class="no-text-shadow column items-center">
          <div class="bold" style="font-size: 33px">中国历史地图</div>
          <div class="ellipsis size-18 bold">历史上的中国从这里走来</div>
        </div>
      </q-parallax>
      <template v-for="topic in querySet">
        <q-parallax v-if="topic.shortcut_eng !== 'china'"
          :key="topic.id"
          @click.native="$router.push('/topic/' + topic.shortcut_eng + '/')"
          src="/statics/bar/old.jpg"
          :height="imgHeight"
          class="topic q-mb-xl shadow-15">
          <div slot="loading title">正在载入...</div>
          <div class="no-text-shadow column items-center">
            <div class="bold" style="font-size: 33px">{{ topic.title }}</div>
            <div class="ellipsis size-18 bold">{{ topic.description }}</div>
          </div>
          <!--<div class="ellipsis text-white text-shadow-black">dd</div>-->
        </q-parallax>
      </template>
      <!--<q-parallax v-for="topic in querySet"-->
                  <!--:key="topic.id"-->
                  <!--@click.native="toTopic(topic.id)"-->
                  <!--src="/statics/bar/2.jpg"-->
                  <!--:height="imgHeight"-->
                  <!--class="topic q-mb-xl shadow-15">-->
        <!--<div slot="loading title">正在载入...</div>-->
        <!--<div class="size-48 title text-white text-shadow-black q-my-lg">{{ topic.title }}</div>-->
        <!--<div class="ellipsis text-white text-shadow-black">{{ topic.description }}</div>-->
      <!--</q-parallax>-->
    </div>
  </a-page>
</template>

<script>
  import { querySetMixin } from '../mixins'

  export default {
    name: 'PageTopics',
    mixins: [querySetMixin],
    data () {
      return {
        api: '/api/topic/',
        limit: 10
      }
    },
    computed: {
      imgHeight () {
        const windowWidth = this.$q.screen.width

        if (windowWidth > 1600) {
          return 280
        } else if (windowWidth > 1200) {
          return 240
        } else if (windowWidth > 800) {
          return 220
        } else if (windowWidth > 576) {
          return 200
        } else {
          return 180
        }
      }
    },
    methods: {
      toTopic (id) {
        this.$router.push('/topic/' + id)
      }
    }
  }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"

  #topics
    .topic
      cursor pointer
      border 2px solid #333!important
    .topic:hover
        border 2px solid $negative!important
</style>
